<template>
  <div class="top">
    <!-- 返回搜索按钮 -->
    <van-nav-bar
      v-model="gjc"
      left-arrow
      @click-left="backHome"
      @click-right="searching"
      right-text="搜索"
    >
      <template #title>
        <van-search
          shape="round"
          placeholder="请输入搜索关键词"
          v-model="gjc"
        />
      </template>
    </van-nav-bar>

    <div class="goodlist">
      <div class="goods" v-for="(item, index) in list" :key="index">
        <img :src="item.img1" alt="" />
        <h4>{{ item.proname }}</h4>
        <p>￥{{ item.originprice }}</p>
      </div>
    </div>
    <div>热门搜索</div>
    <div class="btm">
      <div
        class="bottom"
        v-for="(item, index) in emptyList"
        :key="index"
        @click="searching(item.keyword)"
        v-show="item.keyword"
      >
        {{ item.keyword }}
      </div>
    </div>
  </div>
</template>

<script>
import { getSearchKindList, getSearchHot } from "../../api/kind";
import Vue from "vue";
import { Search, NavBar, Popup } from "vant";

Vue.use(Search);
Vue.use(NavBar);
Vue.use(Popup);
export default {
  data() {
    return {
      // show: false,
      gjc: "",
      list: [],
      ss: "",
      emptyList: [],
    };
  },
  methods: {
    backHome() {
      this.$router.back();
    },
    // 搜索列表
    searching(name) {
      console.log(name);
      // console.log(this.gjc);
      if (this.gjc) {
        getSearchKindList({ keyword: this.gjc }).then((res) => {
          console.log(res.data.data);
          this.list = res.data.data;
          // this.list = "";
        });
      } else {
        getSearchKindList({ keyword: name }).then((res) => {
          console.log(res.data.data);
          this.list = res.data.data;
        });
      }
    },
  },
  created() {
    // 热门搜索
    getSearchHot().then((res) => {
      console.log(res.data.data);
      this.emptyList = res.data.data;
      console.log(this.emptyList);
    });
  },
};
</script>

<style scoped>
.goodlist {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  box-sizing: border-box;
  justify-content: space-between;
  background: #f5f5f5;
}

.goodlist .goods img {
  width: 100%;
}
.goods {
  width: 49%;
  margin-bottom: 10px;
  background: white;
  /* padding: 10px; */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #434343;
  font-weight: normal;
}
.bottom {
  background-color: #f5f5f5;
  width: 17%;
  line-height: 0.3rem;
  margin: 10px 5px;
  text-align: center;
  border-radius: 5px;
}
.btm {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  margin-top: 10px;
}
</style>